<template>
    <!-- 不使用弹性布局的 justify 来使内容靠左 -->
    <el-row>
        <el-col :span="12">
            <el-card class="chart-card">
                <h3 class="chart-title">前 5 分类书籍人数统计</h3>
                <div id="top5DnameAndCountDiv" class="chart-column"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="chart-card">
                <h3 class="chart-title">分类书籍占比</h3>
                <div id="pieChartDiv" class="chart-column"></div>
            </el-card>
        </el-col>
    </el-row>
</template>


<script setup>
import accountApi from "@/api/accountApi";
import * as echarts from "echarts";
import { onMounted } from "vue";

// 定义函数显示柱形图表
function column() {
    accountApi.top5()
       .then(resp => {
            let data = [];
            let count = [];

            for (let index = 0; index < resp.data.length; index++) {
                data.push(resp.data[index].cname);
                count.push(Math.floor(resp.data[index].count)); // 去除小数位，只取整数部分
            }

            let myChart = echarts.init(document.getElementById('top5DnameAndCountDiv'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '前 5 的分类和书籍人数',
                    textStyle: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: 18
                    }
                },
                legend: {
                    data: ['书籍数量'],
                    right: '10%',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#666'
                    }
                },
                xAxis: {
                    data: data,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#666",
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#666",
                            width: 1
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    // 设置 y 轴刻度从 0 开始，步长为 1
                    min: 0,
                    max: Math.max(...count) + 1,
                    interval: 1
                },
                series: [
                    {
                        name: '书籍数量',
                        type: 'bar',
                        data: count,
                        barWidth: '20%',
                        itemStyle: {
                            color: '#009688',
                            borderRadius: [5, 5, 0, 0]
                        }
                    }
                ]
            };
            myChart.setOption(option);
        })
}

// 定义函数显示饼图
function pieChart() {
    accountApi.top()
        .then(resp => {
            let data = [];

            for (let index = 0; index < resp.data.length; index++) {
                data.push({
                    name: resp.data[index].cname,
                    value: Math.floor(resp.data[index].count) // 去除小数位，只取整数部分
                });
            }

            let myChart = echarts.init(document.getElementById('pieChartDiv'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '',
                    textStyle: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        color: '#666'
                    }
                },
                series: [
                    {
                        name: '书籍数量',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        })
}

onMounted(() => {
    column();
    pieChart();
});

</script>

<style scoped>
.chart-card {
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 15px;
    background-color: #f9f9f9;
    margin-left: 0;
    /* 让卡片靠左，去除可能存在的外边距 */
}

.chart-column {
    width: 600px;
    height: 450px;
    border: 1px solid #e0e0e0;
}

.chart-title {
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}
</style>